<template>
  <div class="putaway-management-container base-page-container">
    <!-- 搜索区域 -->
    <common-search v-model="searchForm" :search-items="searchItemsConfig" @search="handleSearch" @reset="resetSearchForm">
      <!-- 时间范围插槽模板 -->
      <template #timeRange="{ form }">
        <el-radio-group v-model="form.timeRange">
          <el-radio label="近7天">近7天</el-radio>
          <el-radio label="近30天">近30天</el-radio>
          <el-radio label="近3个月">近3个月</el-radio>
        </el-radio-group>
      </template>
    </common-search>

    <!-- 操作按钮区域 -->
    <div class="operation-buttons-container">
      <action-buttons 
        :selected-data="selectedRows" 
        :buttons="buttonsConfig"
        :custom-buttons="customButtons"
        @button-click="handleButtonClick"
      />
    </div>

    <!-- 表格区域 -->
    <custom-table
      :data="tableData"
      :columns="tableColumns"
      :loading="tableLoading"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      table-id="pending-operation-table"
      @selection-change="handleSelectionChange"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <!-- 状态列的自定义插槽 -->
      <template #status="{ row }">
        <el-tag :type="getStatusTagType(row.status)">
          {{ row.status }}
        </el-tag>
      </template>
      
      <!-- 操作列 -->
      <template #operation="{ row }">
        <theme-button link @click="handleView(row)">查看</theme-button>
        <theme-button link @click="handleLogView(row)">日志</theme-button>
      </template>
    </custom-table>

    <!-- 提示弹窗 -->
    <el-dialog v-model="tipDialogVisible" title="提示" width="400px">
      <div class="warning-message">
        <el-icon color="#E6A23C"><WarningFilled /></el-icon>
        <span>只支持单货主多订单进行多单入库</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="tipDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 上架对话框 -->
    <el-dialog v-model="putawayDialogVisible" title="上架" width="1200px" destroy-on-close>
      <div class="putaway-dialog-container">
        <!-- 上架信息头部 -->
        <div class="putaway-header">
          <div class="header-item">
            <span class="label">上架单号：</span>
            <el-input v-model="putawayForm.putawayNo" class="header-input" placeholder="上架单号" disabled></el-input>
          </div>
          <div class="header-item">
            <span class="label">单据备注：</span>
            <el-input v-model="putawayForm.remark" class="header-input" placeholder="请输入单据备注"></el-input>
          </div>
        </div>
		
        <action-buttons
          :buttons="{import: { visible: false, order: 2, type: themeType.value || 'primary' }}"
          :custom-buttons="[
          {
            name: 'selectGoods',
            customLabel: '选择商品',
            customIcon: 'CirclePlusFilled',
            type: themeType.value || 'primary',
            iconColor: '#009A1D',
            order: 1,
            visible: true
          },  
          {
            name: 'recommend-location',
            customLabel: '推荐货位',
            customIcon: 'Refrigerator',
            type: themeType.value || 'primary',
            iconColor: themeColor,
            order: 1,
            visible: true
          }
          ]"
          @button-click="handleRecommendLocation"
        />

        <!-- 上架商品表格 -->
        <div class="putaway-table-container">
          <el-table
            :data="putawayProducts"
            border
            style="width: 100%"
            v-loading="putawayProductsLoading"
            @selection-change="handlePutawayProductSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="" width="50"></el-table-column>
            <el-table-column label="来源货位" min-width="120">
              <template #default="{ row }">
                <div class="clickable-cell" @click="handleSelectSourceLocation(row)">
                  {{ row.sourceLocation }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品编号" prop="productCode" min-width="100"></el-table-column>
            <el-table-column label="商品条码" prop="barcode" min-width="120"></el-table-column>
            <el-table-column label="商品名称" prop="productName" min-width="150"></el-table-column>
            <el-table-column label="规格编码" prop="specCode" min-width="100"></el-table-column>
            <el-table-column label="规格值" prop="specValue" min-width="100"></el-table-column>
            <el-table-column label="单位" prop="unit" min-width="80"></el-table-column>
            <el-table-column label="重量(kg)" prop="weight" min-width="100"></el-table-column>
            <el-table-column label="体积(m³)" prop="volume" min-width="100"></el-table-column>
            <el-table-column label="货位数量" prop="putawayQty" min-width="100"></el-table-column>
            <el-table-column label="本次上架数" min-width="120">
              <template #default="{ row }">
                <el-input v-model.number="row.currentPutawayQty" size="small" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="上架货位" min-width="130">
              <template #default="{ row }">
                <div 
                  :class="[
                    'clickable-cell', 
                    !row.targetLocation ? 'select-location-btn' : ''
                  ]" 
                  @click="handleSelectTargetLocation(row)"
                >
                  {{ row.targetLocation || '选择' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="80">
              <template #default="{ row }">
                <theme-button type="danger" link @click="handleRemoveItem(row)">
                  <el-icon size="25"><CircleClose /></el-icon>
                </theme-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelPutaway">取消</el-button>
          <el-button type="primary" @click="confirmPutaway">确认上架</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 来源货位选择弹窗 -->
    <el-dialog 
      v-model="sourceLocationDialogVisible" 
      title="选择商品" 
      width="800px" 
      append-to-body 
      destroy-on-close
      :modal-append-to-body="false"
      :z-index="10"
    >
      <div class="source-location-dialog">
        <div class="search-bar-putaway">
          <div class="search-item">
            <span class="label">商品名称</span>
            <el-input v-model="sourceLocationSearch.productName" placeholder="商品名称"></el-input>
          </div>
          <el-button type="primary" @click="searchSourceProducts">查询</el-button>
          <el-button @click="resetSourceSearch">重置</el-button>
        </div>
        
        <el-table
          :data="sourceProducts"
          border
          style="width: 100%"
          v-loading="sourceProductsLoading"
          @row-click="handleSourceProductRowClick"
        >
          <el-table-column type="index" label="#" width="50"></el-table-column>
          <el-table-column label="来源货位" prop="sourceLocation" min-width="120"></el-table-column>
          <el-table-column label="商品编号" prop="productCode" min-width="120"></el-table-column>
          <el-table-column label="商品条码" prop="barcode" min-width="120"></el-table-column>
          <el-table-column label="商品名称" prop="productName" min-width="150"></el-table-column>
          <el-table-column label="规格编码" prop="specCode" min-width="120"></el-table-column>
          <el-table-column label="规格值" prop="specValue" min-width="100"></el-table-column>
        </el-table>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="sourceLocationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSelectSourceLocation">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 库存货位选择弹窗 -->
    <el-dialog
      v-model="inventoryLocationDialogVisible"
      title="库存货位选择"
      width="1000px"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <div class="inventory-location-dialog">
        <!-- 搜索栏 -->
        <div class="search-area">
          <el-form :inline="true" size="small">
            <el-form-item label="商品编码">
              <el-input v-model="inventoryLocationSearchParams.productCode" placeholder="请输入商品编码"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="inventoryLocationSearchParams.productName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="库位">
              <el-input v-model="inventoryLocationSearchParams.location" placeholder="请输入库位"></el-input>
            </el-form-item>
            <el-form-item>
              <theme-button type="primary" @click="handleInventoryLocationSearch">
                <el-icon><Search /></el-icon> 查询
              </theme-button>
              <theme-button @click="resetInventoryLocationSearch">
                <el-icon><Refresh /></el-icon> 重置
              </theme-button>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 表格区域 -->
        <div class="inventory-tables-container">
          <!-- 上方表格（已选数据）-->
          <el-table
            :data="selectedInventoryProducts"
            border
            style="width: 100%; margin-bottom: 20px;"
            height="220px"
            @selection-change="handleSelectedInventoryChange"
            @row-click="handleSelectedInventoryTopRowClick"
            ref="upperTableRef"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="#" width="50"></el-table-column>
            <el-table-column label="库存属性" prop="inventoryAttribute" min-width="100"></el-table-column>
            <el-table-column label="库区" prop="warehouseZone" min-width="100"></el-table-column>
            <el-table-column label="货位编号" prop="locationCode" min-width="120"></el-table-column>
            <el-table-column label="货位类型" prop="locationType" min-width="120"></el-table-column>
            <el-table-column label="商品编码" prop="productCode" min-width="120"></el-table-column>
            <el-table-column label="商品条码" prop="barcode" min-width="120"></el-table-column>
            <el-table-column label="商品规格" prop="productSpec" min-width="120"></el-table-column>
            <el-table-column label="可用库存" prop="availableInventory" min-width="100"></el-table-column>
          </el-table>
          
          <!-- 添加按钮区 -->
          <div class="add-remove-buttons">
            <theme-button @click="handleMoveUp" type="primary">
              <el-icon><ArrowUp /></el-icon> 增加
            </theme-button>
            <theme-button @click="handleMoveDown" type="primary">
              <el-icon><ArrowDown /></el-icon> 删除
            </theme-button>
          </div>
          
          <!-- 下方表格（主要数据源）-->
          <el-table
            :data="inventoryProducts"
            border
            style="width: 100%"
            v-loading="inventoryProductsLoading"
            @selection-change="handleInventorySelectionChange"
            @row-click="handleInventoryProductRowClick"
            ref="lowerTableRef"
            height="220px"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="#" width="50"></el-table-column>
            <el-table-column label="库存属性" prop="inventoryAttribute" min-width="100"></el-table-column>
            <el-table-column label="库区" prop="warehouseZone" min-width="100"></el-table-column>
            <el-table-column label="货位编号" prop="locationCode" min-width="120"></el-table-column>
            <el-table-column label="货位类型" prop="locationType" min-width="120"></el-table-column>
            <el-table-column label="商品编码" prop="productCode" min-width="120"></el-table-column>
            <el-table-column label="商品条码" prop="barcode" min-width="120"></el-table-column>
            <el-table-column label="商品规格" prop="productSpec" min-width="120"></el-table-column>
            <el-table-column label="可用库存" min-width="100">
              <template #default="{ row }">
                <el-input v-model.number="row.availableInventory" size="small" type="number"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="inventoryLocationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmInventorySelection">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 货位选择弹窗 - 使用组件化的LocationSelector -->
    <location-selector
      v-model:visible="targetLocationDialogVisible"
      :title="'货位选择'"
      :is-batch-mode="isSelectingForBatch"
      :has-selected-items="selectedPutawayProducts.length > 0"
      @search="handleLocationSearch"
      @cancel="closeLocationSelector"
      @confirm="handleLocationConfirm"
      @apply-all="handleLocationApplyAll"
      @row-click="handleLocationRowClick"
      ref="locationSelectorRef"
    />
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  computed
} from 'vue'
import {
  CirclePlusFilled,
  Upload,
  Printer,
  WarningFilled,
  Plus,
  Remove,
  Delete,
  Search,
  LocationFilled,
  Download,
  Refresh,
  Setting,
  Goods,
  Location,
  CircleClose,
  ArrowDown,
  ArrowUp
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useTheme } from '@/hooks/useTheme'

// 使用主题组合API
const { themeType, themeColor } = useTheme()
console.log("颜色",themeColor.value)
// 搜索项配置列表
const searchItemsConfig = [{
    label: '上架单号',
    prop: 'putawayNo',
    type: 'el-input',
    placeholder: '请输入上架单号',
    defaultVisible: true
  },
  {
    label: '商品名称',
    prop: 'productName',
    type: 'el-input',
    placeholder: '请输入商品名称',
    defaultVisible: true
  },
  {
    label: '货主名称',
    prop: 'owner',
    type: 'el-select',
    placeholder: '请选择货主名称',
    defaultVisible: true,
    options: [
      {
        label: 'E货主',
        value: 'E货主'
      },
      {
        label: 'D货主',
        value: 'D货主'
      }
    ]
  },
  {
    label: '入库时间',
    prop: 'inboundTime',
    type: 'el-date-picker-range',
    placeholder: '请选择入库时间范围',
    defaultVisible: true,
    format: 'YYYY-MM-DD',
    valueFormat: 'YYYY-MM-DD'
  },
  {
    label: '时间范围',
    prop: 'timeRange',
    type: 'slot',
    slotName: 'timeRange',
    defaultVisible: true
  }
]

// 按钮配置
const buttonsConfig = ref({
  add: { visible: false },
  export: { visible: false },
  delete: { visible: false },
  enable: { visible: false },
  disable: { visible: false },
  import: { visible: false },
  viewLog: { visible: false },
  edit: { visible: false }
})

// 自定义按钮配置
const customButtons = ref([
  {
    name: 'putaway',
    customLabel: '上架',
    customIcon: 'UploadFilled',
    type: 'primary',
	iconColor:"#009A1D",
    plain: true,
    order: 1,
    visible: true
  },
  {
    name: 'export',
    customLabel: '导出',
    customIcon: 'Download',
    type: 'primary',
    plain: true,
    order: 2,
    visible: true
  }
])

// 搜索表单数据
const searchForm = reactive({
  putawayNo: '',
  productName: '',
  owner: '',
  timeRange: '近7天',
  inboundTime: []
})

// 表格数据相关
const tableData = ref([])
const tableLoading = ref(false)
const selectedRows = ref([])

// 分页相关
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 400
})

// 提示对话框
const tipDialogVisible = ref(false)

// 表格列配置
const tableColumns = ref([
  { prop: 'putawayNo', label: '上架单号', width: '120', minWidth: '120', visible: true },
  { prop: 'owner', label: '货主名称', width: '100', minWidth: '100', visible: true },
  { prop: 'inboundTime', label: '入库时间',  minWidth: '160', visible: true },
  { prop: 'putawayTime', label: '上架时间',  minWidth: '160', visible: true },
  { prop: 'unitInfo', label: '单据备注',  minWidth: '120', visible: true },
  { prop: 'operation', label: '操作', width: '140', minWidth: '140', fixed: 'right', visible: true, slot: true }
])

// 直接入库弹窗相关变量
const receiveDialogVisible = ref(false)
const receiveForm = reactive({
  inboundNo: '',
  externalOrderNo: '',
  orderNo: '',
  inboundTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
  supplierName: '',
  owner: '',
  inboundType: '',
  remark: '',
  productSearch: '',
  storageLocation: ''
})

// 直接入库商品表格数据
const receiveProducts = ref([])
const receiveProductsLoading = ref(false)
const selectedProducts = ref([])

// 上架货位选项
const storageLocationOptions = ref([
  { value: '选择1', label: 'A01-01-02' },
  { value: '选择2', label: 'A01-01-04' },
  { value: '选择3', label: 'A01-01-06' },
  { value: '选择4', label: 'A01-01-08' }
])

// 计算接收商品的总数量
const totalReceiveQty = computed(() => {
  return receiveProducts.value.reduce((sum, product) => {
    return sum + (product.receiveQty || 0)
  }, 0)
})

// 获取表格数据
const fetchTableData = async () => {
  tableLoading.value = true
  try {
    // 模拟API请求
    setTimeout(() => {
      tableData.value = [
        {
          putawayNo: 'SJ24123105',
          owner: 'E货主',
          inboundTime: '2024-12-31 23:00:00',
          putawayTime: '2024-12-31 23:30:00',
          unitInfo: '10'
        },
        {
          putawayNo: 'SJ24123104',
          owner: 'D货主',
          inboundTime: '2024-12-31 23:00:00',
          putawayTime: '2024-12-31 23:30:00',
          unitInfo: '10'
        },
        {
          putawayNo: 'SJ24123103',
          owner: 'E货主',
          inboundTime: '2024-12-31 18:00:00',
          putawayTime: '2024-12-31 19:00:00',
          unitInfo: '10'
        },
        {
          putawayNo: 'SJ24123102',
          owner: 'D货主',
          inboundTime: '2024-12-31 18:00:00',
          putawayTime: '2024-12-31 19:00:00',
          unitInfo: '10'
        },
        {
          putawayNo: 'SJ24123101',
          owner: 'E货主',
          inboundTime: '2024-12-31 18:00:00',
          putawayTime: '2024-12-31 19:00:00',
          unitInfo: '10'
        }
      ]
      tableLoading.value = false
      pagination.total = 5 // 更新总数
    }, 500)
  } catch (error) {
    console.error('获取表格数据失败', error)
    tableLoading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  pagination.currentPage = 1
  fetchTableData()
}

// 重置搜索表单
const resetSearchForm = () => {
  for (const key in searchForm) {
    if (key === 'timeRange') {
      searchForm[key] = '近7天'
    } else if (key === 'inboundTime') {
      searchForm[key] = []
    } else {
      searchForm[key] = ''
    }
  }
  fetchTableData()
}

// 获取收货商品数据
const fetchReceiveProducts = () => {
  receiveProductsLoading.value = true
  
  // 模拟异步获取数据
  setTimeout(() => {
    receiveProducts.value = [
      {
        id: '1',
        productCode: '005',
        productName: 'E商品',
        barcode: '23123',
        specCode: '规格001',
        specValue: '标准',
        unit: '件',
        length: 10,
        width: 5,
        height: 2,
        volume: 0.064,
        weight: 0.5,
        planQty: 10,
        receiveQty: 10,
        baseUnitQty: 10,
        batchNo: 'BT2024001',
        expireDate: '2025-01-01',
        sn: 'SN001',
        location: '',
        remark: '',
        custom: ''
      },
      {
        id: '2',
        productCode: '006',
        productName: 'F商品',
        barcode: '32442',
        specCode: '规格002',
        specValue: '特殊',
        unit: '件',
        length: 10,
        width: 5,
        height: 2,
        volume: 0.064,
        weight: 0.5,
        planQty: 10,
        receiveQty: 10,
        baseUnitQty: 10,
        batchNo: 'BT2024002',
        expireDate: '2025-01-01',
        sn: 'SN002',
        location: '',
        remark: '',
        custom: ''
      }
    ]
    receiveProductsLoading.value = false
  }, 500)
}

// 增加接收数量
const increaseQty = (row) => {
  if (!row.receiveQty) {
    row.receiveQty = 0
  }
  row.receiveQty++
  row.baseUnitQty = row.receiveQty // 同步更新基本单位数
}

// 减少接收数量
const decreaseQty = (row) => {
  if (!row.receiveQty || row.receiveQty <= 0) {
    row.receiveQty = 0
    return
  }
  row.receiveQty--
  row.baseUnitQty = row.receiveQty // 同步更新基本单位数
}

// 处理数量变化
const handleQtyChange = (row) => {
  if (row.receiveQty < 0) {
    row.receiveQty = 0
  }
  row.baseUnitQty = row.receiveQty // 同步更新基本单位数
}

// 移除商品
const removeProduct = (index) => {
  receiveProducts.value.splice(index, 1)
}

// 处理商品表格选择变化
const handleProductSelectionChange = (selection) => {
  selectedProducts.value = selection
}

// 添加新商品
const handleAddNewProduct = () => {
  // 创建一个新商品对象
  const newProduct = {
    id: Date.now().toString(),
    productCode: `00${Math.floor(Math.random() * 900) + 100}`,
    productName: `商品${Math.floor(Math.random() * 100)}`,
    barcode: Math.floor(Math.random() * 90000) + 10000,
    specCode: `规格${Math.floor(Math.random() * 100)}`,
    specValue: '',
    unit: '件',
    length: 10,
    width: 5,
    height: 2,
    volume: 0.064,
    weight: 0.5,
    planQty: 10,
    receiveQty: 1,
    baseUnitQty: 1,
    batchNo: `BT2024${Math.floor(Math.random() * 900) + 100}`,
    expireDate: '2025-01-01',
    sn: '',
    location: receiveForm.storageLocation || '', // 使用当前选择的货位
    remark: '',
    custom: ''
  }
  
  // 添加到商品列表
  receiveProducts.value.push(newProduct)
  ElMessage.success('已添加新商品')
}

// 清空商品列表
const handleClearProducts = () => {
  ElMessageBox.confirm('确定要清空所有商品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    receiveProducts.value = []
    ElMessage.success('已清空商品列表')
  }).catch(() => {
    // 用户取消操作
  })
}

// 添加扫描的商品
const handleAddProduct = () => {
  if (!receiveForm.productSearch) {
    ElMessage.warning('请输入商品条码或商品编号')
    return
  }
  
  // 模拟查找商品
  const found = receiveProducts.value.find(item => 
    item.barcode === receiveForm.productSearch || 
    item.productCode === receiveForm.productSearch
  )
  
  if (found) {
    // 如果已存在，增加数量
    found.receiveQty += 1
    found.baseUnitQty = found.receiveQty // 同步更新基本单位数
    ElMessage.success('商品数量已更新')
  } else {
    // 如果不存在，添加新商品
    const newProduct = {
      id: Date.now().toString(),
      productCode: receiveForm.productSearch,
      productName: `商品${Math.floor(Math.random() * 100)}`,
      barcode: receiveForm.productSearch,
      specCode: `规格${Math.floor(Math.random() * 100)}`,
      specValue: '',
      unit: '件',
      length: 10,
      width: 5,
      height: 2,
      volume: 0.064,
      weight: 0.5,
      planQty: 10,
      receiveQty: 1,
      baseUnitQty: 1,
      batchNo: `BT2024${Math.floor(Math.random() * 900) + 100}`,
      expireDate: '2025-01-01',
      sn: '',
      location: receiveForm.storageLocation || '', // 使用当前选择的货位
      remark: '',
      custom: ''
    }
    receiveProducts.value.push(newProduct)
    ElMessage.success('商品已添加')
  }
  
  // 清空搜索框
  receiveForm.productSearch = ''
}

// 取消收货
const cancelReceive = () => {
  ElMessageBox.confirm('确定要取消收货操作吗？已添加的商品信息将丢失。', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    receiveDialogVisible.value = false
  }).catch(() => {
    // 用户取消操作
  })
}

// 上架对话框相关变量
const putawayDialogVisible = ref(false)
const putawayForm = reactive({
  putawayNo: '',
  remark: ''
})

// 上架商品表格数据
const putawayProducts = ref([])
const putawayProductsLoading = ref(false)
const selectedPutawayProducts = ref([])

// 选项卡和选择类型
const activeTab = ref('selectProduct')
const selectType = ref('product')

// 处理上架操作
const handlePutaway = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择需要上架的记录')
    return
  }
  
  // 初始化上架表单数据
  const selectedRow = selectedRows.value[0]
  putawayForm.putawayNo = selectedRow.putawayNo
  
  // 模拟获取上架商品数据
  fetchPutawayProducts()
  
  // 显示上架弹窗
  putawayDialogVisible.value = true
}

// 获取上架商品数据
const fetchPutawayProducts = () => {
  putawayProductsLoading.value = true
  
  // 模拟异步获取数据
  setTimeout(() => {
    putawayProducts.value = [
      {
        id: '1',
        sourceLocation: 'A01-01-01',
        productName: 'E商品',
        productCode: '005',
        barcode: '23123',
        specCode: '规格001',
        specValue: '标准',
        unit: '件',
        weight: 0.5,
        volume: 0.064,
        putawayQty: 10,
        currentPutawayQty: 10,
        targetLocation: ''
      },
      {
        id: '2',
        sourceLocation: 'A01-01-02',
        productName: 'F商品',
        productCode: '006',
        barcode: '32442',
        specCode: '规格002',
        specValue: '特殊',
        unit: '件',
        weight: 0.5,
        volume: 0.064,
        putawayQty: 10,
        currentPutawayQty: 10,
        targetLocation: ''
      }
    ]
    putawayProductsLoading.value = false
  }, 500)
}


// 移除上架商品
const removePutawayProduct = (index) => {
  putawayProducts.value.splice(index, 1)
}
// 处理上架商品表格选择变化
const handlePutawayProductSelectionChange = (selection) => {
  selectedPutawayProducts.value = selection
}

// 取消上架
const cancelPutaway = () => {
  ElMessageBox.confirm('确定要取消上架操作吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    putawayDialogVisible.value = false
  }).catch(() => {
    // 用户取消操作
  })
}

// 确认上架
const confirmPutaway = () => {
  if (putawayProducts.value.length === 0) {
    ElMessage.warning('请添加商品后再确认上架')
    return
  }
  
  // 检查是否有商品数量为0
  const zeroQtyProducts = putawayProducts.value.filter(p => !p.putawayQty || p.putawayQty === 0)
  if (zeroQtyProducts.length > 0) {
    ElMessage.warning('存在上架数量为0的商品，请检查')
    return
  }
  
  // 检查是否有商品没有选择上架货位
  const noLocationProducts = putawayProducts.value.filter(p => !p.targetLocation)
  if (noLocationProducts.length > 0) {
    ElMessage.warning('存在未选择上架货位的商品，请检查')
    return
  }
  
  // 提交上架请求
  ElMessage.success('上架成功')
  putawayDialogVisible.value = false
  
  // 刷新主表格数据
  fetchTableData()
}

// 处理查看详情
const handleView = (row) => {
  console.log('查看详情', row)
  ElMessage.success(`查看上架单号：${row.putawayNo}`)
}

// 处理查看日志
const handleLogView = (row) => {
  console.log('查看日志', row)
  ElMessage.success(`查看上架单号：${row.putawayNo} 的操作日志`)
}

// 处理表格选择
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 处理分页大小变化
const handleSizeChange = (size) => {
  pagination.pageSize = size
  fetchTableData()
}

// 处理当前页变化
const handleCurrentChange = (page) => {
  pagination.currentPage = page
  fetchTableData()
}

// 库存货位选择弹窗相关变量
const inventoryLocationDialogVisible = ref(false)
const inventoryLocationSearchParams = reactive({
  productCode: '',
  productName: '',
  location: ''
})
const inventoryProducts = ref([]) // 下方表格数据（主要数据源）
const selectedInventoryProducts = ref([]) // 上方表格数据（已选数据）
const inventoryProductsLoading = ref(false)
const selectedInventoryRows = ref([]) // 下方表格选中行
const selectedInventoryTopRows = ref([]) // 上方表格选中行

// 模拟库存产品数据
const mockInventoryProducts = [
  {
    id: '1',
    inventoryAttribute: '正品',
    warehouseZone: '库区A',
    locationCode: 'A01-01-01',
    locationType: '存货货位',
    productCode: 'SP-1001',
    productName: '测试商品1',
    barcode: '10011000',
    productSpec: '规格A型',
    availableInventory: 100
  },
  {
    id: '2',
    inventoryAttribute: '正品',
    warehouseZone: '库区A',
    locationCode: 'A01-02-01',
    locationType: '存货货位',
    productCode: 'SP-1002',
    productName: '测试商品2',
    barcode: '10021000',
    productSpec: '规格B型',
    availableInventory: 200
  },
  {
    id: '3',
    inventoryAttribute: '次品',
    warehouseZone: '库区B',
    locationCode: 'B01-01-01',
    locationType: '存货货位',
    productCode: 'SP-1003',
    productName: '测试商品3',
    barcode: '10031000',
    productSpec: '规格C型',
    availableInventory: 150
  },
  {
    id: '4',
    inventoryAttribute: '正品',
    warehouseZone: '库区C',
    locationCode: 'C01-01-01',
    locationType: '存货货位',
    productCode: 'SP-1004',
    productName: '测试商品4',
    barcode: '10041000',
    productSpec: '规格D型',
    availableInventory: 300
  },
  {
    id: '5',
    inventoryAttribute: '正品',
    warehouseZone: '库区A',
    locationCode: 'A02-01-01',
    locationType: '存货货位',
    productCode: 'SP-1005',
    productName: '测试商品5',
    barcode: '10051000',
    productSpec: '规格E型',
    availableInventory: 250
  }
]

// 处理货位推荐
const handleRecommendLocation = (btn) => {
  if(btn === 'recommend-location'){
	  if (receiveProducts.value.length === 0) {
	    ElMessage.warning('没有商品可以推荐货位')
	    return
	  }
	  
	  // 模拟推荐逻辑
	  receiveProducts.value.forEach(product => {
	    const randomIndex = Math.floor(Math.random() * storageLocationOptions.value.length)
	    product.location = storageLocationOptions.value[randomIndex].label
	  })
	  
	  ElMessage.success('货位推荐完成')
  }else if (btn === 'selectGoods'){
	  // 显示库存货位选择弹窗
    inventoryLocationDialogVisible.value = true
    // 清空已选商品
    selectedInventoryProducts.value = []
    // 模拟获取库存数据
    fetchInventoryProducts()
  }
  
}

// 查询库存货位
const handleInventoryLocationSearch = () => {
  fetchInventoryProducts()
}

// 重置库存货位搜索条件
const resetInventoryLocationSearch = () => {
  inventoryLocationSearchParams.productCode = ''
  inventoryLocationSearchParams.productName = ''
  inventoryLocationSearchParams.location = ''
  fetchInventoryProducts()
}

// 获取库存产品数据
const fetchInventoryProducts = () => {
  inventoryProductsLoading.value = true
  // 实际项目中这里应该是API调用
  setTimeout(() => {
    // 模拟基于搜索条件过滤数据
    inventoryProducts.value = mockInventoryProducts.filter(item => {
      const matchProductCode = !inventoryLocationSearchParams.productCode || 
        item.productCode.includes(inventoryLocationSearchParams.productCode)
      const matchProductName = !inventoryLocationSearchParams.productName || 
        item.productName.includes(inventoryLocationSearchParams.productName)
      const matchLocation = !inventoryLocationSearchParams.location || 
        item.locationCode.includes(inventoryLocationSearchParams.location)
      return matchProductCode && matchProductName && matchLocation
    })
    inventoryProductsLoading.value = false
  }, 500)
}

// 上方表格引用
const upperTableRef = ref(null)
// 下方表格引用
const lowerTableRef = ref(null)

// 处理库存货位商品行点击
const handleInventoryProductRowClick = (row) => {
  // 检查该行是否已经选中
  const isSelected = selectedInventoryRows.value.some(item => item.id === row.id)
  if (!isSelected) {
    // 如果未选中，则添加到选中行数组
    selectedInventoryRows.value.push(row)
    // 等下一个循环再尝试设置checkbox
    setTimeout(() => {
      lowerTableRef.value?.toggleRowSelection(row, true)
    }, 0)
  } else {
    // 如果已选中，则从选中数组中移除
    selectedInventoryRows.value = selectedInventoryRows.value.filter(item => item.id !== row.id)
    // 取消勾选
    setTimeout(() => {
      lowerTableRef.value?.toggleRowSelection(row, false)
    }, 0)
  }
}

// 处理上方表格行点击
const handleSelectedInventoryTopRowClick = (row) => {
  // 检查该行是否已经选中
  const isSelected = selectedInventoryTopRows.value.some(item => item.id === row.id)
  if (!isSelected) {
    // 如果未选中，则添加到选中行数组
    selectedInventoryTopRows.value.push(row)
    // 等下一个循环再尝试设置checkbox
    setTimeout(() => {
      upperTableRef.value?.toggleRowSelection(row, true)
    }, 0)
  } else {
    // 如果已选中，则从选中数组中移除
    selectedInventoryTopRows.value = selectedInventoryTopRows.value.filter(item => item.id !== row.id)
    // 取消勾选
    setTimeout(() => {
      upperTableRef.value?.toggleRowSelection(row, false)
    }, 0)
  }
}

// 处理上方表格的选择变化
const handleSelectedInventoryChange = (selection) => {
  selectedInventoryTopRows.value = selection
}

// 处理下方表格的选择变化
const handleInventorySelectionChange = (selection) => {
  selectedInventoryRows.value = selection
}

// 将选中的下方表格数据移动到上方表格（增加）
const handleMoveUp = () => {
  if (selectedInventoryRows.value.length === 0) {
    ElMessage.warning('请先选择要增加的库存货位')
    return
  }
  
  // 将选中的行添加到上方表格
  selectedInventoryRows.value.forEach(row => {
    // 检查是否已存在
    const exists = selectedInventoryProducts.value.some(item => item.id === row.id)
    if (!exists) {
      selectedInventoryProducts.value.push({ ...row })
      
      // 从下方表格中移除该行
      const index = inventoryProducts.value.findIndex(item => item.id === row.id)
      if (index !== -1) {
        inventoryProducts.value.splice(index, 1)
      }
    }
  })
  
  // 清空选择
  selectedInventoryRows.value = []
  
  ElMessage.success('已将选中的库存货位移至上方')
}

// 将选中的上方表格数据移动到下方表格（删除）
const handleMoveDown = () => {
  if (selectedInventoryTopRows.value.length === 0) {
    ElMessage.warning('请先选择要删除的库存货位')
    return
  }
  
  // 将选中的行添加到下方表格
  selectedInventoryTopRows.value.forEach(row => {
    // 检查是否已存在
    const exists = inventoryProducts.value.some(item => item.id === row.id)
    if (!exists) {
      inventoryProducts.value.push({ ...row })
      
      // 从上方表格中移除该行
      const index = selectedInventoryProducts.value.findIndex(item => item.id === row.id)
      if (index !== -1) {
        selectedInventoryProducts.value.splice(index, 1)
      }
    }
  })
  
  // 清空选择
  selectedInventoryTopRows.value = []
  
  ElMessage.success('已将选中的库存货位移回下方')
}

// 搜索库存货位
const searchInventoryProducts = () => {
  // 在实际应用中这里应该根据搜索条件过滤数据
  fetchInventoryProducts()
}

// 重置库存货位搜索条件
const resetInventorySearch = () => {
  inventoryLocationSearchParams.productCode = ''
  inventoryLocationSearchParams.productName = ''
  inventoryLocationSearchParams.location = ''
  fetchInventoryProducts()
}

// 编辑上架商品相关变量
const editingPutawayProducts = ref([])
const currentEditingRowIndex = ref(-1)

// 确认库存货位选择
const confirmInventorySelection = () => {
  if (selectedInventoryProducts.value.length === 0) {
    ElMessage.warning('请先将库存货位增加到上方')
    return
  }
  
  // 将选中的上方表格数据应用到当前编辑的上架产品中
  if (currentEditingRow.value) {
    // 取第一个选中的库存货位作为目标货位
    const selectedLocation = selectedInventoryProducts.value[0]
    currentEditingRow.value.targetLocation = selectedLocation.locationCode
    currentEditingRow.value.targetWarehouseZone = selectedLocation.warehouseZone
    
    ElMessage.success('已成功设置目标货位')
    inventoryLocationDialogVisible.value = false
  } else {
    ElMessage.warning('未找到正在编辑的行')
  }
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  switch(status) {
    case '入库等待':
      return 'warning';
    case '入库完成':
      return 'success';
    case '集合入库':
      return 'info';
    case '取消':
      return 'danger';
    default:
      return 'primary';
  }
}

// 刷新数据
const refreshData = () => {
  fetchTableData()
  ElMessage.success('数据已刷新')
}

// 处理列设置
const handleColumnSettings = () => {
  ElMessage.info('列设置功能开发中')
}

// 处理按钮点击
const handleButtonClick = (buttonName) => {
  switch (buttonName) {
    case 'putaway':
      handlePutaway()
      break
    case 'export':
      handleExport()
      break
    default:
      break
  }
}

// 处理导出操作
const handleExport = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择需要导出的记录')
    return
  }
  ElMessage.success('正在导出数据...')
}

// 页面初始化
onMounted(() => {
  fetchTableData()
})

// 来源货位选择弹窗相关变量
const sourceLocationDialogVisible = ref(false)
const currentEditingRow = ref(null)
const sourceLocationSearch = reactive({
  productName: ''
})
const sourceProducts = ref([])
const sourceProductsLoading = ref(false)
const selectedSourceProduct = ref(null)

// 处理选择来源货位
const handleSelectSourceLocation = (row) => {
  currentEditingRow.value = row
  sourceLocationDialogVisible.value = true
  selectedSourceProduct.value = null
  // 模拟获取来源货位数据
  fetchSourceProducts()
}

// 获取来源货位商品数据
const fetchSourceProducts = () => {
  sourceProductsLoading.value = true
  
  // 模拟异步获取数据
  setTimeout(() => {
    sourceProducts.value = [
      {
        id: '1',
        sourceLocation: 'A01-01-01',
        productCode: '001',
        barcode: '123456',
        productName: 'A类产品',
        specCode: '规格001',
        specValue: '标准',
        unit: '件',
        weight: 0.5,
        volume: 0.064,
        putawayQty: 10,
        currentPutawayQty: 10
      },
      {
        id: '2',
        sourceLocation: 'A01-01-02',
        productCode: '001',
        barcode: '123456',
        productName: 'A类产品',
        specCode: '规格001',
        specValue: '标准',
        unit: '件',
        weight: 0.5,
        volume: 0.064,
        putawayQty: 10,
        currentPutawayQty: 10
      }
    ]
    sourceProductsLoading.value = false
  }, 300)
}

// 处理来源商品表格行点击
const handleSourceProductRowClick = (row) => {
  selectedSourceProduct.value = row
  
  // 立即填充数据到当前编辑的行
  if (currentEditingRow.value) {
    // 更新当前行的数据
    currentEditingRow.value.sourceLocation = row.sourceLocation
    currentEditingRow.value.productCode = row.productCode
    currentEditingRow.value.barcode = row.barcode
    currentEditingRow.value.productName = row.productName
    currentEditingRow.value.specCode = row.specCode
    currentEditingRow.value.specValue = row.specValue
    currentEditingRow.value.unit = row.unit || '件'
    currentEditingRow.value.weight = row.weight || 0.5
    currentEditingRow.value.volume = row.volume || 0.064
    currentEditingRow.value.putawayQty = row.putawayQty || 10
    currentEditingRow.value.currentPutawayQty = row.currentPutawayQty || 10
    
    // 自动关闭弹窗
    sourceLocationDialogVisible.value = false
    
    // 显示成功提示
    ElMessage.success('已更新商品信息')
  }
}

// 搜索来源商品
const searchSourceProducts = () => {
  fetchSourceProducts()
}

// 重置来源商品搜索条件
const resetSourceSearch = () => {
  sourceLocationSearch.productName = ''
  fetchSourceProducts()
}

// 确认选择来源货位商品
const confirmSelectSourceLocation = () => {
  if (!selectedSourceProduct.value) {
    ElMessage.warning('请选择一个商品')
    return
  }
  
  // 获取当前编辑的行数据
  if (currentEditingRow.value) {
    // 更新当前行的数据
    currentEditingRow.value.sourceLocation = selectedSourceProduct.value.sourceLocation
    currentEditingRow.value.productCode = selectedSourceProduct.value.productCode
    currentEditingRow.value.barcode = selectedSourceProduct.value.barcode
    currentEditingRow.value.productName = selectedSourceProduct.value.productName
    currentEditingRow.value.specCode = selectedSourceProduct.value.specCode
    currentEditingRow.value.specValue = selectedSourceProduct.value.specValue
    currentEditingRow.value.unit = selectedSourceProduct.value.unit || '件'
    currentEditingRow.value.weight = selectedSourceProduct.value.weight || 0.5
    currentEditingRow.value.volume = selectedSourceProduct.value.volume || 0.064
    currentEditingRow.value.putawayQty = selectedSourceProduct.value.putawayQty || 10
    currentEditingRow.value.currentPutawayQty = selectedSourceProduct.value.currentPutawayQty || 10
    
    ElMessage.success('已更新商品信息')
  }
  
  sourceLocationDialogVisible.value = false
}

// 货位选择弹窗相关变量
const targetLocationDialogVisible = ref(false)
const targetLocationSearch = reactive({
  locationCode: ''
})
const targetLocations = ref([])
const targetLocationsLoading = ref(false)
const selectedTargetLocation = ref(null)
const locationSelectorRef = ref(null)
const isSelectingForBatch = ref(false) // 是否为批量选择模式

// 批量设置货位
const handleBatchSetLocation = () => {
  if (selectedPutawayProducts.value.length === 0) {
    ElMessage.warning('请先选择需要设置货位的商品')
    return
  }
  
  // 设置为批量选择模式
  isSelectingForBatch.value = true
  targetLocationDialogVisible.value = true
  
  // 模拟获取货位数据
  fetchTargetLocations()
}

// 处理选择上架货位
const handleSelectTargetLocation = (row) => {
  currentEditingRow.value = row
  isSelectingForBatch.value = false // 设置为单行选择模式
  targetLocationDialogVisible.value = true
  
  // 模拟获取货位数据
  fetchTargetLocations()
}

// 获取货位数据
const fetchTargetLocations = () => {
  // 设置加载状态
  if (locationSelectorRef.value) {
    locationSelectorRef.value.setLoading(true)
  }
  
  // 模拟异步获取数据
  setTimeout(() => {
    const locations = [
      {
        id: '1',
        locationName: 'A01-01-01',
        locationType: '拣货货位'
      },
      {
        id: '2',
        locationName: 'A01-01-02',
        locationType: '拣货货位'
      },
      {
        id: '3',
        locationName: 'A01-01-03',
        locationType: '拣货货位'
      },
      {
        id: '4',
        locationName: 'A01-01-04',
        locationType: '拣货货位'
      },
      {
        id: '5',
        locationName: 'A01-01-05',
        locationType: '拣货货位'
      }
    ]
    
    // 更新组件数据
    if (locationSelectorRef.value) {
      locationSelectorRef.value.setData(locations)
      locationSelectorRef.value.setLoading(false)
    }
  }, 300)
}

// 处理货位搜索
const handleLocationSearch = (searchParams) => {
  // 在实际应用中这里应该根据搜索条件过滤数据
  fetchTargetLocations()
}

// 关闭货位选择器
const closeLocationSelector = () => {
  targetLocationDialogVisible.value = false
}

// 处理货位行点击
const handleLocationRowClick = (row) => {
  // 立即填充数据到当前编辑的行
  if (currentEditingRow.value) {
    // 更新当前行的数据
    currentEditingRow.value.targetLocation = row.locationName
    
    // 自动关闭弹窗
    targetLocationDialogVisible.value = false
    
    // 显示成功提示
    ElMessage.success('已设置上架货位')
  }
}

// 处理确认货位选择
const handleLocationConfirm = (location) => {
  // 获取当前编辑的行数据
  if (currentEditingRow.value) {
    // 更新当前行的数据
    currentEditingRow.value.targetLocation = location.locationName
    
    ElMessage.success('已设置上架货位')
  }
}

// 处理应用到所有项目
const handleLocationApplyAll = (location) => {
  if (isSelectingForBatch.value) {
    // 应用到已选择的商品
    selectedPutawayProducts.value.forEach(product => {
      product.targetLocation = location.locationName
    })
    
    ElMessage.success('已批量设置货位')
  } else {
    // 应用到所有商品
    putawayProducts.value.forEach(product => {
      product.targetLocation = location.locationName
    })
    
    ElMessage.success('已批量设置货位')
  }
}

// 处理移除商品项
const handleRemoveItem = (row) => {
  const index = putawayProducts.value.findIndex(item => item.id === row.id)
  if (index !== -1) {
    putawayProducts.value.splice(index, 1)
    ElMessage.success('已移除商品')
  }
}
</script>

<style lang="scss" scoped>

  // 来源货位选择弹窗样式
  .source-location-dialog {
    .search-bar-putaway {
	  width: 70%;	
      display: flex;
      align-items: center;
	  flex-direction: row;
      margin: 20px 0px;
      
      .search-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        
        .label {
          margin-right: 10px;
          white-space: nowrap;
        }
        
        .el-input {
          width: 200px;
        }
      }
      
      .el-button {
        margin-left: 10px;
      }
    }
  }
  
  // 货位选择弹窗样式
  .target-location-dialog {
    .search-bar-location {
      width: 70%;
      display: flex;
      align-items: center;
      flex-direction: row;
      margin: 20px 0px;
      
      .search-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        
        .label {
          margin-right: 10px;
          white-space: nowrap;
        }
        
        .el-input {
          width: 200px;
        }
      }
      
      .el-button {
        margin-left: 10px;
      }
    }
    
    :deep(.el-table__row) {
      cursor: pointer;
      
      &:hover {
        background-color: #f0f9eb;
      }
    }
  }
  
  // 库存货位选择弹窗样式
  .inventory-location-dialog {
    .search-area {
      display: flex;
      align-items: center;
      margin: 15px 0px;
      
      :deep(.el-form) {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
      }
      
      .el-form-item {
        margin-right: 15px;
        margin-bottom: 0;
        
        .el-input {
          width: 180px;
        }
      }
    }
    
    .inventory-tables-container {
      position: relative;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      padding: 10px;
      background-color: #f8f8f8;
      
      .add-remove-buttons {
        display: flex;
        justify-content: center;
        margin: 10px 0;
        gap: 10px;
        
        :deep(.el-button) {
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 100px;
          
          .el-icon {
            margin-right: 5px;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      
      :deep(.el-table) {
        margin-bottom: 15px;
        
        .el-table__header-wrapper {
          background-color: #f5f7fa;
          
          th {
            background-color: #f5f7fa;
            color: #606266;
            font-weight: 600;
          }
        }
        
        .el-table__body-wrapper {
          .el-table__row {
            &:hover {
              background-color: #f0f9eb;
            }
            
            td {
              padding: 8px 0;
            }
          }
        }
        
        // 确保表格边框清晰可见
        border: 1px solid #dcdfe6;
        
        &::before {
          display: none;
        }
      }
    }
  }
  
  // 对话框样式重写
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #dcdfe6;
    padding: 15px 20px;
    margin: 0;
  }
  
  :deep(.el-dialog__footer) {
    border-top: 1px solid #dcdfe6;
    padding: 15px 20px;
  }
  
.putaway-management-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .operation-buttons-container {
    display: flex;
    margin-bottom: 15px;
    justify-content: space-between;
    
    .tab-buttons {
      display: flex;
      gap: 10px;
      
      .el-button {
        display: flex;
        align-items: center;
        
        .el-icon {
          margin-right: 4px;
        }
      }
    }
    
    .right-buttons {
      display: flex;
      align-items: center;
      
      .el-button-group {
        margin-left: 10px;
      }
    }
  }
  
  :deep(.el-table__expanded-cell) {
    padding: 20px !important;
  }
  
  :deep(.el-table) {
    .el-table__body-wrapper {
      overflow-x: auto;
    }
    
    .el-table__row {
      cursor: pointer;
    }
  }
  
  .warning-message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #E6A23C;
    font-size: 14px;
  }

  // 直接入库弹窗样式
  .receive-dialog-container {
    .receive-header {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      margin-top: 15px;
      .header-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 15px;
        min-width: 350px;
        
        .label {
          width: 100px;
          text-align: right;
          margin-right: 10px;
          white-space: nowrap;
          
          &.required::before {
            content: '*';
            color: #F56C6C;
            margin-right: 4px;
          }
        }
        
        .header-input {
          width: 240px;
        }
      }
    }
    
    .product-search-action-container {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
	  .action-container{
		  margin-bottom: 0px;
	  }	
      .product-search-area {
        display: flex;
        align-items: center;
        margin-right: 20px;
        
        .search-title {
          min-width: 100px;
          text-align: right;
          margin-right: 10px;
        }
        
        .search-input-with-action {
          display: flex;
          align-items: center;
          
          .product-search-input {
            width: 250px;
          }
          
          .add-btn {
            margin-left: 10px;
          }
        }
      }
      
      .location-select-area {
        display: flex;
        align-items: center;
        margin-right: 20px;
        
        .search-title {
          min-width: 80px;
          text-align: right;
          margin-right: 10px;
        }
        
        .location-select {
          width: 190px;
        }
      }
      
      .action-button-area {
        display: flex;
        align-items: center;
        gap: 10px;
        
        :deep(.el-button) {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 0;
          
          .el-icon {
            margin-right: 5px;
          }
        }
        
        :deep(.action-buttons) {
          margin-right: 0;
        }
      }
    }
    
    .product-table-container {
      margin-bottom: 15px;
      
      .el-table {
		  
		  /* 修复操作列透视问题 */
		  :deep(.el-table__fixed-right .el-table__fixed-body-wrapper) {
		    background-color: #fff !important;
		  }
		  
		  :deep(.el-table__fixed-right .el-table__cell) {
		    background-color: #fff !important;
		  }
		  
		  :deep(.el-table-fixed-column--right) {
		    background-color: #fff !important;
		    z-index: 1 !important;
		  }
		  
		  :deep(.el-table-fixed-column--right.is-first-column) {
		    background-color: #fff !important;
		    z-index: 1 !important;
		  }
		  
		  :deep(.el-table__fixed-right .cell) {
		    background-color: #fff !important;
		  }
		  
		  :deep(.el-table__fixed-right tr:hover .el-table__cell) {
		    background-color: rgba(0, 0, 0, 0.04) !important;
		  }
		  
		  :deep(.el-table__fixed-header-wrapper) {
		    z-index: 12 !important;
		  }
        .qty-editor {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .qty-icon {
            font-size: 18px;
            color: var(--el-color-primary);
            cursor: pointer;
            padding: 0 5px;
            
            &:hover {
              color: var(--el-color-primary-light-3);
            }
          }
          
          .el-input {
            margin: 0 5px;
            width: 70px;
          }
        }
      }
    }
    
    .receive-summary {
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
      
      .summary-item {
        margin-left: 20px;
        
        .label {
          font-weight: bold;
          margin-right: 5px;
        }
        
        .value {
          color: var(--el-color-primary);
          font-weight: bold;
        }
      }
    }
  }

  // 上架对话框样式
  .putaway-dialog-container {
    .putaway-header {
      display: flex;
      flex-wrap: wrap;
      margin: 20px 0px;
      
      .header-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 15px;
        min-width: 350px;
        
        .label {
          width: 100px;
          text-align: right;
          margin-right: 10px;
          white-space: nowrap;
        }
        
        .header-input {
          width: 240px;
        }
      }
    }
    
    .putaway-table-container {
      margin-bottom: 15px;
      
      .table-operations {
        margin-bottom: 10px;
        display: flex;
        justify-content: flex-end;
      }
	  		 
      .el-table {
		  
		/* 修复操作列透视问题 */
		:deep(.el-table__fixed-right .el-table__fixed-body-wrapper) {
		  background-color: #fff !important;
		}
		
		:deep(.el-table__fixed-right .el-table__cell) {
		  background-color: #fff !important;
		}
		
		:deep(.el-table-fixed-column--right) {
		  background-color: #fff !important;
		  z-index: 1 !important;
		}
		
		:deep(.el-table-fixed-column--right.is-first-column) {
		  background-color: #fff !important;
		  z-index: 1 !important;
		}
		
		:deep(.el-table__fixed-right .cell) {
		  background-color: #fff !important;
		}
		
		:deep(.el-table__fixed-right tr:hover .el-table__cell) {
		  background-color: rgba(0, 0, 0, 0.04) !important;
		}
		
		:deep(.el-table__fixed-header-wrapper) {
		  z-index: 12 !important;
		}  
		  
        .clickable-cell {
          color: var(--el-color-primary);
          cursor: pointer;
          text-decoration: underline;
          
          &:hover {
            color: var(--el-color-primary);
          }
          
          &.select-location-btn {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: var(--action-btn-bg-color);
            border: 1px solid var(--el-color-primary);
            color: var(--el-color-primary);
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: .1s;
            font-weight: 500;
            padding: 4px 15px;
            font-size: 14px;
            border-radius: 4px;
            text-decoration: none;
            
            &:hover {
              background: var(--action-btn-hover-bg-color);
              color: var(--el-color-primary);
            }
          }
        }
        
        .qty-editor {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .qty-icon {
            font-size: 18px;
            color: var(--el-color-primary);
            cursor: pointer;
            padding: 0 5px;
            
            &:hover {
              color: var(--el-color-primary-light-3);
            }
          }
          
          .el-input {
            margin: 0 5px;
            width: 70px;
          }
        }
      }
    }
  }
  
}
</style> 